<template>
  <a-layout class="main">
    <admin-sider :collapsed="collapsed" :appName="appName" :logo="logo" />

    <page-layout :collapsed="collapsed" :style="{ marginLeft: '200px' }" />
  </a-layout>
</template>

<script lang="ts">
import AdminSider from './AdminSider.vue'
import PageLayout from './PageLayout.vue'
import { defineComponent, Ref, ref, watch } from 'vue'
import { Store, useStore } from 'vuex'
import { Layout } from 'ant-design-vue'
import logoImg from '@/assets/images/logo.png'

export default defineComponent({
  components: {
    AdminSider,
    PageLayout,
    ALayout: Layout,
    ALayoutContent: Layout.Content,
  },
  setup() {
    const store: Store<any> = useStore()
    const collapsed: Ref<boolean> = ref(store.state.app.sideCollapsed)
    const appName = store.state.app.appName

    watch(
      () => store.state.app.sideCollapsed,
      (to, from) => {
        collapsed.value = to
      },
    )

    return {
      collapsed,
      appName,
      logo: logoImg,
    }
  },
})
</script>
<style lang="less" scoped>
</style>
